<template>
	<view>
		<!-- 导航 -->
		<view>
			<u-navbar back-text="全部团购" :border-bottom="false" :back-text-style="textStyle" back-icon-color="#000000"
			 style="font-weight: 400;font-family: PingFang SC;"></u-navbar>
		</view>
		<!-- 团购 -->
		<view class="introduce" style="width: 90%;margin: 0 auto;">
			<view style="width: 750rpx;">
				<u-tabs :list="lists" active-color="#FCA800" name="title" inactive-color="#707070" font-size="30" font-weight="500" :is-scroll="true"
				 :current="current" :gutter="17" bar-width="100" @change="change"></u-tabs>
			</view>
		</view>
		<mescroll-body top="0" :down="downOption" :height="comHeight" :up="upOption" ref="mescrollRef" :fixed="true" :topbar="false"
		 bottom="0" :bottombar="true" :safearea="false" @init="mescrollInit" @down="downCallback">
		<view class="wrap" style="padding:14rpx 28rpx 30rpx 52rpx;">
			<view style="font-size: 38rpx;color: #272755;font-weight: bold;">
				{{current == 0 ? '全部' : tits}}
			</view>
			<view v-for="(item,index) in cateList" :key="index">
				<view class="lists" @click="tuangouDetails(item.packageBusinessId)">
					<image :src="item.coverImage" mode="" style="width: 122rpx;height: 122rpx;"></image>
					<view class="right">
						<view class="texts">{{item.name}}</view>
						<view class="nums">
							<view class="money">
								<view class="jiage">￥<text>{{item.unitPrice}}</text></view>
								<view class="yuanjia">￥{{item.showPrice}}</view>
							</view>
							<view class="yishou">
								已售{{item.totalSale}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view style="margin-top: 50rpx;" v-if="!showList">
				<u-divider color="#DEDEDE" half-width="120" border-color="#DEDEDE">{{prompt}}</u-divider>
			</view>
		</view>
		</mescroll-body>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				comHeight:0,
				textStyle: {
					color: '#272755'
				},
				lists: [],
				current: 0,
				arrays:[],
				cateId:'',
				cateList:[],
				titles:[],
				tits:'',
				// 下拉刷新配置
				downOption: {
					use: true,
					auto: false,
					offset: 40
				},
				upOption: {
					use: true,
					auto: false
				},
				mescroll: null,
				showList:false,
				totalPage:1,
				page: 1,
				pageSize: 10,
				prompt:''
			}
		},
		onLoad(option) {
			var that = this;
			var menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			const {
				top,
				width,
				height,
				right
			} = menuButtonInfo;
			uni.getSystemInfo({
				success: res => {
					const {
						statusBarHeight
					} = res;
					const margin = top - statusBarHeight;
					var navHeight = height + statusBarHeight + margin * 4;
					that.comHeight = (res.windowHeight - navHeight-60) + 'px';
					console.log(that.comHeight);
				}
			});
			that.enterpriseId = option.enterpriseId
			console.log(that.enterpriseId,"商家id")
			// 获取套餐分类
			that.getCategory();
			// 获取套餐列表
			that.getCateList();
		},
		onReachBottom() {
			if(this.totalPage == this.page){
				return false;
			}else{
				this.page += 1;
				// this.page = 1;
				this.getCateList();
			}
			
		},
		methods: {
			change(index) {
				var id = this.arrays[index]
				this.cateId = id
				var tit = this.titles[index]
				this.tits = tit
				console.log(this.tits,"this.tits")
				this.current = index;
				this.cateList = [];
				this.getCateList();
			},
			// 获取套餐分类
			getCategory(){
				let opts = {
					way: true, //true JSON请求；false 表单请求
					method: 'post',
					url: 'package-business/category',
				};
				let data = {
					entId:this.enterpriseId
				};
				this.http.httpTokenRequest(opts, data).then(res => {
					if(res.code = 200){
						// this.lists = res.data
						var arr=res.data
						var array = []
						var title = []
						arr.forEach((item)=>{
							item.packageCategoryId=item.packageCategoryId;
							array.push(item.packageCategoryId)
							title.push(item.title)
						})
						this.titles = title
						console.log(this.titles,"--")
						this.arrays = array
						this.lists = arr;
					}else{
						this.$refs.uToast.show({
							title: res.message,
							type: 'error'
						})
					}
				})
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			// 下拉刷新回调函数
			downCallback() {
				setTimeout(() => {
					this.mescroll.endSuccess();
					this.page = 1;
					this.cateList = [];
					this.prompt = '加载中....';
					this.getCateList();
				}, 2000);
			},
			// 获取套餐列表
			getCateList(){
				var _this = this
				let opts = {
					way: true, //true JSON请求；false 表单请求
					method: 'post',
					url: 'package-business/page',
				};
				let data = {
					entId:_this.enterpriseId,
					categoryId:_this.cateId,
					page: _this.page,
					pageSize: _this.pageSize,
				};
				_this.http.httpTokenRequest(opts, data).then(res => {
					if (res.code == 200) {
						_this.totalPage=res.data.pages;
						if (res.data.records.length > 0 || _this.page != 1) {
							_this.showList = false;
							if (res.data.current * res.data.size < res.data.total) {
								for (const key in res.data.records) {
									_this.cateList.push(res.data.records[key]);
								}
								_this.prompt = '加载中....';
							} else {
								for (const key in res.data.records) {
									_this.cateList.push(res.data.records[key]);
								}
								_this.prompt = '没有更多了';
							}
						} else {
							_this.showList = true;
							_this.cateList = []
						}
					}else {
						_this.$refs.uToast.show({
							title: res.message,
							type: 'error'
						})
					}
				})
			},
			// 跳转套餐详情
			tuangouDetails(packageBusinessId){
				uni.navigateTo({
					url:'../tuangouDetails/tuangouDetails?packageBusinessId='+packageBusinessId
				})
			},
		}
	};
</script>

<style scoped lang="scss">
	.lists {
		padding: 40rpx 0 24rpx 0;
		display: flex;
		border-bottom: 1px solid #E8E8F6;
	}
	
	.lists .img {
		width: 122rpx;
		height: 122rpx;
		background: #E4E4E4;
	}
	
	.lists .right {
		width: 78%;
		padding-left: 30rpx;
	}
	.right .texts {
		font-size: 30rpx;
		font-weight: bold;
		color: #3F3F3F;
	}
	
	.right .nums {
		display: flex;
		justify-content: space-between;
		align-items: center;
		// padding-left: 10rpx;
		margin-top: 38rpx;
	}
	.nums .money {
		display: flex;
		font-size: 26rpx;
		font-weight: bold;
	}
	
	.money .jiage {
		color: #F29423;
	}
	
	.jiage text {
		font-size: 38rpx;
	}
	
	.money .yuanjia {
		color: #CECED1;
		text-decoration: line-through;
		margin-top: 10rpx;
		margin-left: 10rpx;
	}
	
	.nums .yishou {
		color: #9393AA;
	}
</style>
